<template>
  <div class="content-container">
    <el-row :gutter="4" class="row-wrap">
      <el-col :span="24">
        <div class="chart-title-container four-border-blueBg">
          <span class="chart-title">总览</span>
          <el-dropdown split-button type="primary" @click="handleClick">
            租户
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>店面1</el-dropdown-item>
                <el-dropdown-item>店面2</el-dropdown-item>
                <el-dropdown-item>店面3</el-dropdown-item>
                <el-dropdown-item>店面4</el-dropdown-item>
                <el-dropdown-item>店面5</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-col>
      <el-col :span="24" :lg="8" :xl="8">
        <div class="wrap-title">菜系分布</div>
        <div class="chart-wrapper four-border-blueBg">
          <PieChart :data-source="cookStyleData" />
        </div>
      </el-col>
      <el-col :span="24" :lg="8" :xl="8">
        <div class="wrap-title">菜谱类型</div>
        <div class="chart-wrapper four-border-blueBg">
          <PieChart :data-source="cookTypeData" />
        </div>
      </el-col>
      <el-col :span="24" :lg="8" :xl="8">
        <div class="wrap-title">设备类型</div>
        <div class="chart-wrapper four-border-blueBg">
          <PieChart :data-source="cookDeviceTypeData" />
        </div>
      </el-col>
      <el-col :span="24">
        <div
          class="chart-title-container four-border-blueBg"
          style="margin-top: 10px"
        >
          <span class="chart-title">烹饪分析</span>
          <span>
            <el-dropdown split-button type="primary" @click="handleClick">
              租户
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>店面1</el-dropdown-item>
                  <el-dropdown-item>店面2</el-dropdown-item>
                  <el-dropdown-item>店面3</el-dropdown-item>
                  <el-dropdown-item>店面4</el-dropdown-item>
                  <el-dropdown-item>店面5</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown
              split-button
              type="primary"
              @click="handleClick"
              style="margin-left: 10px"
            >
              店面
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>店面1</el-dropdown-item>
                  <el-dropdown-item>店面2</el-dropdown-item>
                  <el-dropdown-item>店面3</el-dropdown-item>
                  <el-dropdown-item>店面4</el-dropdown-item>
                  <el-dropdown-item>店面5</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown
              split-button
              type="primary"
              @click="handleClick"
              style="margin-left: 10px"
            >
              周
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>店面1</el-dropdown-item>
                  <el-dropdown-item>店面2</el-dropdown-item>
                  <el-dropdown-item>店面3</el-dropdown-item>
                  <el-dropdown-item>店面4</el-dropdown-item>
                  <el-dropdown-item>店面5</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </span>
        </div>
      </el-col>
      <el-col :span="24" :lg="12" :xl="12">
        <div class="wrap-title">每天烹饪菜品总数量/份</div>
        <div class="chart-wrapper four-border-blueBg">
          <BarChart :data-source="cookCountTotalData" type="1" />
        </div>
      </el-col>
      <el-col :span="24" :lg="12" :xl="12">
        <div class="wrap-title">每天烹饪数量最多菜品/份</div>
        <div class="chart-wrapper four-border-blueBg">
          <BarChart :data-source="cookCountTotalData" type="2" />
        </div>
      </el-col>
      <el-col :span="24">
        <div
          class="chart-title-container four-border-blueBg"
          style="margin-top: 10px"
        >
          <span class="chart-title">设备分析</span>
          <span>
            <el-dropdown split-button type="primary" @click="handleClick">
              租户
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>店面1</el-dropdown-item>
                  <el-dropdown-item>店面2</el-dropdown-item>
                  <el-dropdown-item>店面3</el-dropdown-item>
                  <el-dropdown-item>店面4</el-dropdown-item>
                  <el-dropdown-item>店面5</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown
              split-button
              type="primary"
              @click="handleClick"
              style="margin-left: 10px"
            >
              店面
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>店面1</el-dropdown-item>
                  <el-dropdown-item>店面2</el-dropdown-item>
                  <el-dropdown-item>店面3</el-dropdown-item>
                  <el-dropdown-item>店面4</el-dropdown-item>
                  <el-dropdown-item>店面5</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown
              split-button
              type="primary"
              @click="handleClick"
              style="margin-left: 10px"
            >
              周
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>店面1</el-dropdown-item>
                  <el-dropdown-item>店面2</el-dropdown-item>
                  <el-dropdown-item>店面3</el-dropdown-item>
                  <el-dropdown-item>店面4</el-dropdown-item>
                  <el-dropdown-item>店面5</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </span>
        </div>
      </el-col>
      <el-col :span="24" :lg="12" :xl="12">
        <div class="wrap-title">每天工作总时长/分钟</div>
        <div class="chart-wrapper four-border-blueBg">
          <BarChart :data-source="cookDeviceWorkTimeData" type="3" />
        </div>
      </el-col>
      <el-col :span="24" :lg="12" :xl="12">
        <div class="wrap-title">每天工作最长时间设备/分钟</div>
        <div class="chart-wrapper four-border-blueBg">
          <BarChart :data-source="cookDeviceWorkTimeData" type="4" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import PieChart from './component/PieChart.vue'
import BarChart from './component/BarChart.vue'
import { time } from 'echarts'

const listParams = ref({
  name: '',
  type: '',
  model: '',
  status: ''
})

const loading = ref(false)

// 菜谱菜系统计数据
const cookStyleData = reactive({
  data: [],
  total: 0
})
// 菜谱类型统计数据
const cookTypeData = reactive({
  data: [],
  total: 0
})
// 菜谱设备类型统计数据
const cookDeviceTypeData = reactive({
  data: [],
  total: 0
})
// 每天烹饪菜品总数量统计数据
const cookCountTotalData = reactive({
  xData: [],
  yData: []
})

// 设备工作时长统计数据
const cookDeviceWorkTimeData = reactive({
  xData: [],
  yData: []
})

const gettStatisticsData = () => {
  g_api.recipe.apiRecipeQueryCookStyleStatisticsData().then(({ code, data }) => {
    if (code === '200' && data) {
      cookStyleData.data = data
      cookStyleData.total = data.reduce((sum, item) => sum + item.value, 0)
    }
  })
  g_api.recipe.apiRecipeQueryTypeStatisticsData().then(({ code, data }) => {
    if (code === '200' && data) {
      cookTypeData.data = data
      cookTypeData.total = data.reduce((sum, item) => sum + item.value, 0)
    }
  })
  g_api.device.apiDeviceQueryDeviceTypeStatisticsData().then(({ code, data }) => {
    if (code === '200' && data) {
      cookDeviceTypeData.data = data
      cookDeviceTypeData.total = data.reduce((sum, item) => sum + item.value, 0)
    }
  })
  g_api.recipe.apiRecipeQueryCookCountStatisticsData().then(({ code, data }) => {
    if (code === '200' && data) {
      data.timeList = [1,2,3,4,5,6,7]
      data.countList = [120, 200, 150, 80, 70, 110, 130]
      cookCountTotalData.xData = data.timeList || []
      cookCountTotalData.yData = data.countList || []
    }
  })
  g_api.device.apiDeviceQueryWorkTimeStatisticsData().then(({ code, data }) => {
    if (code === '200' && data) {
      data.timeList = [1,2,3,4,5,6,7]
      data.countList = [60, 80, 70, 90, 100, 110, 120]
      cookDeviceWorkTimeData.xData = data.timeList || []
      cookDeviceWorkTimeData.yData = data.countList || []
    }
  })
}

onMounted(() => {
  gettStatisticsData()
})


const handleReset = () => {
  listParams.value = {
    name: '',
    type: '',
    model: '',
    status: ''
  }
  gettStatisticsData()
}

</script>

<style lang="scss" scoped>
.content-container {
  min-height: 100%;
  height: auto;
}
.chart-title-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  background-color: #fff;
}
.chart-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-333);
}
.wrap-title {
  display: flex;
  align-items: center;
  margin: 8px 0;
  font-size: 18px;
  font-weight: bold;
  color: var(--color-333);
  text-align: center;

  &:before {
    content: '';
    width: 4px;
    height: 20px;
    margin-right: 10px;
    background: var(--color-primary-green);
    border-radius: 4px;
  }
}
</style>
